/* eslint-disable eqeqeq */
/* eslint-disable no-unused-vars */
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import {
  Card,
  Button,
  Modal,
  Tag,
  Image,
  message,
  Form,
  Input,
  Select,
} from 'antd'
import Pagination from '@/utils/Pagination'
import { layoutlist, layoutModel } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import { Unite } from '@/utils/Unite'
import ImageWithToken from '@/plugins/ImageWithToken'
import ImageWithTokenBig from '@/plugins/ImageWithTokenBig'

import VeWithToken from '@/plugins/veWithToken'
import PdfWithToken from '@/plugins/pdfWithToken'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  formRef1 = React.createRef()
  state = {
    label_list: [],
    course_label: '全部课程',
    total: 0, //总页数
    current: 1,
    pageSize: 10,
    dataSource: [],
    visible: false,
    items: {
      course_type: 1,
      course_content: '',
    },
    initialValues: {
      class_id: 1,
    },
    initialValues1: {
      classroom_name: '',
      class_id: 1,
    },
    class_id: 1,
    mockData: [],
  }

  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.onChangeCurPageOrPageSize(1, 10)
    this.classlist()
  }
  classlist = () => {
    post('class/list', {}).then((res) => {
      let data = res.data
      if (data.length > 0) {
        this.setState({ mockData: data, class_id: data[0].id })
        let initialValues = {
          class_id: data[0].id,
        }
        this.formRef.current.setFieldsValue(initialValues)
      } else {
        this.setState({ mockData: data })
      }
    })
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getData(current, pageSize)
      }
    )
  }
  handleSaveBtn = (values) => {
    this.setState({ initialValues: values })
    this.onChangeCurPageOrPageSize(1, 10)
  }
  getData = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
      ...this.state.initialValues,
    }
    post('classroom/list', data).then((res) => {
      this.setState({ dataSource: res.data, total: res.size })
    })
  }
  modal = (item) => {}
  // 随机数
  getRandomInt(min, max) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }
  // 调用函数生成一个22以内的随机整数（0-21）
  Zs = (key, id) => {
    if (key == 1) {
      let data = {
        id: id,
      }
      post('designwork/share/enable', data).then((res) => {
        this.onChangeCurPageOrPageSize(1, 10)
      })
    } else {
      let data = {
        id: id,
      }
      post('designwork/share/disable', data).then((res) => {
        this.onChangeCurPageOrPageSize(1, 10)
      })
    }
  }
  handleReset = () => {
    this.setState({ initialValues: {} })
    this.formRef.current.resetFields()
    let that = this
    setTimeout(function () {
      that.onChangeCurPageOrPageSize(1, 10)
    }, 500) //延时10秒
  }
  //添加
  add = () => {
    this.setState({ visible: true })
  }
  handleCancel = () => {
    this.setState({
      visible: false,
    })
  }
  handleOk = () => {
    const form = this.formRef1.current
    var values = form.getFieldsValue(['class_id', 'classroom_name'])
    let data = {
      ...values,
    }
    post('classroom/create', data).then((res) => {
      if (res.code === 0) {
        message.success('添加成功')
        this.formRef1.current.resetFields()
        this.setState({
          visible: false,
        })
        this.onChangeCurPageOrPageSize(1, 10)
      } else {
        message.error(res.info)
      }
    })
  }
  render() {
    const { i18n } = this.props
    const {
      dataSource,
      mockData,
      items,
      class_id,
      initialValues,
      initialValues1,
    } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }
    const formProps1 = {
      name: 'basic',
      onFinish: this.handleSaveBtns,
      initialValues1,
      ref: this.formRef1,
    }

    return (
      <div className="ct">
        <div className="ban">
          <div className="tetli">班级课堂</div>
          <div
            style={{
              width: '60px',
              height: '6px',
              background:
                'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
            }}
          ></div>
          <Form className="forms" {...layoutlist} {...formProps}>
            <div>
              <Form.Item className={styles.antBut} label="" name="class_id">
                <Select style={{ width: '260px' }} placeholder="搜索班级名称">
                  {mockData.map((item) => (
                    <Select.Option key={item.id} value={item.id}>
                      {item.class_name}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </div>
            <div>
              <Button className={styles.Po_Le} onClick={this.handleReset}>
                {i18n.t`Reset`}
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                style={{ marginLeft: '12px' }}
              >
                {i18n.t`Search`}
              </Button>
              <Button
                type="primary"
                style={{ marginLeft: '12px' }}
                onClick={this.add}
              >
                添加课堂
              </Button>
            </div>
          </Form>
        </div>
        <div style={{ padding: '10px 0 36px 20px', width: '100%' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
            {dataSource.map((item) => {
              return (
                <div
                  style={{
                    margin: '10px',
                    border: '1px solid #cccccc6e',
                    borderRadius: '5px',
                    width: '18%',
                  }}
                >
                  <div
                    onClick={() => this.modal(item)}
                    style={{ cursor: 'pointer', padding: '7px' }}
                  >
                    <img
                      alt=""
                      style={{
                        width: '100%',
                        height: '120px',
                        borderRadius: '4px',
                      }}
                      src={require('../../../imges/' +
                        this.getRandomInt(1, 50) +
                        '.png')}
                    />
                  </div>
                  <div>
                    <div className="Classs_y">{item.classroom_name}</div>
                    <div style={{ margin: '0 10px' }}>
                      <span className="Classs_B">课堂</span>
                      <span className="Classs_B">课堂1</span>
                      <span className="Classs_B">课堂2</span>
                      <span className="Classs_B">课堂3</span>
                    </div>
                    <div className="Classs_Z">
                      <div>
                        <div>
                          <span>在线</span>
                          <span className="class_ren">{item.offline}人</span>
                        </div>
                        <div>
                          <span>离线</span>
                          <span className="class_ren">{item.online}人</span>
                        </div>
                      </div>
                      {item.classroom_stage == 1 ? (
                        <div className="class_sha1">开启上课</div>
                      ) : (
                        <div className="class_sha">正在上课</div>
                      )}
                    </div>
                    <div className="class_BJ">
                      <div style={{ cursor: 'pointer' }}>删除</div>
                      <div
                        style={{
                          width: '1px',
                          height: '40px',
                          background: 'rgba(204, 204, 204, 0.43)',
                        }}
                      ></div>
                      <div style={{ color: '#256FFE', cursor: 'pointer' }}>
                        编辑
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
          <Pagination
            current={this.state.current}
            pageSize={this.state.pageSize}
            total={this.state.total}
            handleChange={this.onChangeCurPageOrPageSize} //当前页及条数改变都会从子组件触发此方法，用于传递页码和条数
            pageSizeOptions={['10']} // 针对不同的组件需求传递每次多少条，不传已在分页组件写默认值了
          ></Pagination>
        </div>
        <Modal
          width={
            items.course_type == 1
              ? '40%'
              : items.course_type == 2
              ? '80%'
              : '40%'
          }
          title="添加课堂"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form {...layoutModel} {...formProps1}>
            <Form.Item
              label="课堂名称"
              name="classroom_name"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Input className="Ip_80" />
            </Form.Item>
            <Form.Item
              label="所属班级"
              name="class_id"
              rules={[
                {
                  required: true,
                  message: '请输入所属班级',
                },
              ]}
            >
              <Select className="Ip_80" onChange={this.onChangeTop}>
                {mockData.map((item) => (
                  <Select.Option key={item.id} value={item.id}>
                    {item.class_name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
Command.propTypes = {
  post: PropTypes.object,
  // loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Command
